<template>
    <div ref="chartContainer" id="StreamChart" class="chart-container" ></div>
</template>
<script>
import * as echarts from 'echarts'

export default {
    name: 'StreamChartContent',
    props: {
        cdata: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            chart: null,
            timer: null,
            currentIndex: 0,
            months: [],
            treeDataURI: '',
            lineCount: 10
        }
    },
    watch: {
        cdata: {
            handler(newVal) {
                if (!newVal || !newVal.monthlyData) {
                    console.error('No valid data provided');
                    this.months = [];
                    return;
                }
                
                this.currentIndex = 0;
                
                this.months = Object.keys(newVal.monthlyData).sort();
                
                if (this.timer) {
                    clearInterval(this.timer);
                }
                
                if (this.chart) {
                    this.chart.clear();
                }
                
                if (this.months.length > 0) {
                    this.initChart();
                    this.startAnimation();
                }
            },
            deep: true
        }
    },
    mounted() {
        if (!this.cdata || !this.cdata.monthlyData) {
            console.error('No valid data provided');
            return;
        }
        
        this.months = Object.keys(this.cdata.monthlyData).sort();
        
        if (this.months.length > 0) {
            this.initChart();
            this.startAnimation();
        }
    },
    beforeUnmount() {
        if (this.timer) {
            clearInterval(this.timer)
        }
        if (this.chart) {
            this.chart.dispose()
            this.chart = null
        }
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$refs.chartContainer)
            this.updateChart()
        },
        makeCategoryData() {
            const categoryData = [];
            for (let i = 0; i < this.lineCount; i++) {
                categoryData.push(i + 'a');
            }
            return categoryData;
        },
        makeSeriesData(currentMonth, negative) {
            if (!currentMonth || !this.cdata.monthlyData[currentMonth]) {
                return [];
            }
            
            const value = this.cdata.monthlyData[currentMonth];
            const seriesData = [];
            
            for (let i = 0; i < this.lineCount; i++) {
                let sign = negative ? -1 * (i % 3 ? 0.9 : 1) : 1 * ((i + 1) % 3 ? 0.9 : 1);
                seriesData.push({
                    value: sign * (
                        value <= 10
                            ? Math.abs(i - this.lineCount / 2 + 0.5) < this.lineCount / 5
                                ? value * 10
                                : 0
                            : (this.lineCount - Math.abs(i - this.lineCount / 2 + 0.5)) * value
                    ),
                    symbolOffset: i % 2 ? ['50%', 0] : undefined
                });
            }
            return seriesData;
        },
        updateChart() {
            if (!this.months.length) {
                return;
            }
            
            const currentMonth = this.months[this.currentIndex];
            const option = {
                color: ['#e54035'],
                xAxis: {
                    axisLine: { show: false },
                    axisLabel: { show: false },
                    axisTick: { show: false },
                    splitLine: { show: false },
                    name: currentMonth,
                    nameLocation: 'middle',
                    nameGap: 40,
                    nameTextStyle: {
                        color: 'green',
                        fontSize: 30,
                        fontFamily: 'Arial'
                    },
                    min: -2800,
                    max: 2800
                },
                yAxis: {
                    data: this.makeCategoryData(),
                    show: false
                },
                grid: {
                    top: 'center',
                    height: 280
                },
                series: [
                    {
                        name: 'all',
                        type: 'pictorialBar',
                        symbol: 'image://' + this.treeDataURI,
                        symbolSize: [30, 55],
                        symbolRepeat: true,
                        data: this.makeSeriesData(currentMonth),
                        animationEasing: 'elasticOut'
                    },
                    {
                        name: 'all',
                        type: 'pictorialBar',
                        symbol: 'image://' + this.treeDataURI,
                        symbolSize: [30, 55],
                        symbolRepeat: true,
                        data: this.makeSeriesData(currentMonth, true),
                        animationEasing: 'elasticOut'
                    }
                ]
            }
            this.chart.setOption(option)
        },
        startAnimation() {
            if (this.months.length > 0) {
                this.timer = setInterval(() => {
                    this.currentIndex = (this.currentIndex + 1) % this.months.length;
                    this.updateChart();
                }, 800);
            }
        }
    }
}
</script>
<style scoped>

.chart-container {

  position: absolute;

  top: 6vh;

  left: 0;

  right: 0;

  bottom: 0;

  will-change: transform;

}

</style>